<!-- 员工工作量详情页面-->


<div style="background-color: white;height:64px;margin: 15px 30px 0px;border-bottom-color: red;border-bottom-style: solid;border-bottom-width: 3px">
    <div style="float: left;padding: 17px">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;员工工作量报表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    </div>
    <div style="float: left;padding: 17px;margin-right: 45px">
        <p><i class="glyphicon glyphicon-th-list"></i>
            <span>自定义指标</span>
        </p>
    </div>
    <div style="float: left;width: 120px;height: 56px;background-color: red ;padding: 12px;margin-top: 5px;text-align: center" >
        <p style="color: white"><i class="glyphicon glyphicon-stats"></i>
            <span>查看报表</span>
        </p>
    </div>
</div>
<div style="background-color: white;height: 170px;margin: 0px 30px 15px">
    <div>
        <div style="width: 600px ;height: 50px">
            <div style="float: left;height: 25px;margin: 10px ;padding: 5px 20px;background-color: #ff6600;"><font color="white">员工工作量</font></div> <div style="float: left;margin-left: 10px;padding-top: 10px"><font style="color: #ff9900"><h6>可至“自定义指标”中设置需要查看的字段，默认现实全部字段</h6></font></div>
        </div>
    </div>
    <div style="margin: 20px 10px;width: 100%;height: 120px">
        <div class="btn-group" data-toggle="buttons" style="float: left">
            <label class="btn btn-primary active" onclick="dofindWorkCount('today',25)">
                <input type="radio" name="options" id="option1" autocomplete="off" checked >今天
            </label>
            <label class="btn btn-primary" onclick="dofindWorkCount('week',25)">
                <input type="radio" name="options" id="option2" autocomplete="off" >本周
            </label>
            <label class="btn btn-primary" onclick="dofindWorkCount('month',25)">
                <input type="radio" name="options" id="option3" autocomplete="off" >本月
            </label>
        </div>
        <div style="float: left;margin-left: 50px ;padding-top: 2px ;width: 500px;padding-left: 10px" >
            <!--时间控件 -->
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <label>选择日期：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" onblur="dofindWorkCount($(this).val(),25)" id="date"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--  <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>-->
<div style="margin: 0px 30px ;background-color: white;height: 50px ;padding: 15px 10px 0px" >
    <button style="background-color: #ff6600" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
        导出报表
    </button>
</div>
<div  style="overflow-x:scroll ;height: 150px;padding: 5px 10px;background-color: white;margin: 0px 30px">
    <table id="tb_departments" class="table table-bordered" style="min-width: 1500px; border-style: solid;border-color: #8e908c;border-width: 1px">
        <tbody>
        <tr style="background-color: papayawhip">
            <td width="320px"  rowspan="2" style="background-color: #8e908c;padding-top: 30px">人员/组织</td>
            <td width="120px" colspan="4">房源新增</td>
            <td width="120px" colspan="4">房源跟进</td>
            <td width="120px" colspan="4">房源通话</td>
            <td width="120px" colspan="4">客源跟进</td>
        </tr>
        <tr style="background-color: papayawhip">
            <td width="120px">新登出售</td>
            <td width="120px">新登出租</td>
            <td width="120px">激活出售</td>
            <td width="120px">激活出租</td>

            <td width="120px">房源跟进</td>
            <td width="120px">潜房跟进</td>
            <td width="120px" colspan="2">有效委托跟进</td>

            <td width="120px">房源拨打总数</td>
            <td width="120px">房源成功接听数</td>
            <td width="120px">有效房源接听数</td>
            <td width="120px">房源接通时长</td>

            <td width="120px">二手带看房源</td>
            <td width="120px">一手带看房源</td>
            <td width="120px">出售带看房源</td>
            <td width="120px">出租带看房源</td>
        </tr>
        <td width="320px" id="staffName">&nbsp;&nbsp;</td>

        <td width="120px" id="source">0</td>
        <td width="120px" id="addRent">0</td>
        <td width="120px" id="activeSail">0</td>
        <td width="120px" id="activeRent">0</td>

        <td width="120px" id="sourceNum">0</td>
        <td width="120px" id="whouse">0</td>
        <td width="120px" >0</td>
        <td width="120px" >0</td>

        <td width="120px" id="totalPhone">0</td>
        <td width="120px" id="successPhone">0</td>
        <td width="120px" >0</td>
        <td width="120px" id="sourceTime">0</td>

        <td width="120px" id="sechouseToken">0</td>
        <td width="120px" id="firhouseToken">0</td>
        <td width="120px" id="totalToken">0</td>
        <td width="120px" id="renthouseToken">0</td>
        </tbody>
    </table>
</div>
<script type="text/javascript">


    $(function () {

        $('#datetimepicker1').datetimepicker({

            format: 'YYYY-MM-DD',

            locale: moment.locale('zh-cn')

        });

        $('#datetimepicker2').datetimepicker({

            format: 'YYYY-MM-DD hh:mm',

            locale: moment.locale('zh-cn')

        });

    });


</script>
<script>
    $(function () {
        var id =25;
        var time ="today";
        dofindWorkCount(time,id);



    })


    function dofindWorkCount(time,id) {
        $.getJSON("/emp/countWork/"+time+"/"+id,function (_data) {
            if(_data.state==200){
                doInitData(_data.data);
            }else {
                console.log(_data.msg);
            }
        })
    }
    function doInitData(data) {
        $.each(data, function (i,val) {
                dochange(i,val)
        })
        $("#totalToken").html(data.sechouseToken+data.firhouseToken);
        $("#staffName").html(data.staffName+"/"+data.deptName);
    }

    function dochange(id,data) {
        if(data==null)data=0;
        $("#"+id).html(data);
    }

</script>